"use client"

import { useEffect, useState } from 'react';

import logo from '@/assets/img/logo.png';
import logoB from '@/assets/img/logoB.png';
import menuImg from '@/assets/img/menu.png';
import { FloatButton  } from 'antd';
import Image from 'next/image';
import '@/assets/css/head.scss'
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const Hedaer = () => {

  const [openPH, setOpenPH] = useState(false);
  const pathname = usePathname()

  const menuArr = [
    { to: '/', name: 'Home', go: true },
    { to: '/twitter', name: 'Twitter'},
    { to: '/blog', name: 'Blog' },
    { to: '/docs', name: 'Docs' },
    { to: '/ecosystem', name: 'Ecosystem' },
    { to: '/TOK_chian_white_paper1.0.pdf', name: 'Whitepaper',download:true,go: true},
    { to: 'https://dashboard.tokchain.org', name: 'Testnet' ,go: true}
  ]

  // const [isShow, setIsSow] = useState(false)

  // useEffect(() => {
  //   // 滚动条滚动时触发
  //   window.addEventListener('scroll', scrollChange, true);
    
  //   return () => {
  //     window.removeEventListener('scroll', scrollChange, false)
  //   }
  // }, [])

  // const scrollChange = () => {
  //   let sTop = document.documentElement.scrollTop
  //   if (sTop > 1800) {
  //     setIsSow(true)
  //   } else {
  //     setIsSow(false)
  //   }
  // }

  const showDrawer = () => {
    setOpenPH(true);
  };

  const isups = (name: string) => {
    // console.log(name)
    if(name == '/blog' && pathname.indexOf('/blog') > -1){
        return true
    }
    return (pathname === name)
  }
  const onClose = (ev?: any) => {
    ev.stopPropagation()
    ev.preventDefault()
    setOpenPH(false);
  };



  return <>
    {/* <BackTop />  */}
    <FloatButton.BackTop />
    <div className={`header_box header_boxpa fadeup`}>
      <ScrollToTop></ScrollToTop>
      <div className='flex_sb content'>
        <Link href="/">
          <Image src={logo} alt="logo" />
        </Link>
        <div className='menu_con'> 
          <ul>
            {
              menuArr.map((item) => <li key={item.name}>
                {
                  item.go ? <Link title={item.name} target={item.download?'_blank':'_self'} href={item.to} className={isups(item.to) ? "ups go" : "go"}>{item.name}</Link> : <a>
                    {item.name}
                  </a>
                }
              </li>)
            }
          </ul>
        </div>
        <div className='phone_menu'>
          <Image src={menuImg} alt="" onClick={showDrawer} />
        </div>
      </div>
      <div className='line'></div>
    </div>
   

    <div className={openPH ? 'drawer_box drawer_box_open' : 'drawer_box'} onClick={onClose}>
      <div onClick={(ev) => {
        ev.stopPropagation()
        ev.preventDefault()
      }}>
        <div className='menu_phone_box'>
          <div className='menu_phone_header'>
            <div>
              <Image src={logoB} alt="logo" />
            </div>
            
            <div className='menu_close' onClick={onClose}>
              ×
            </div>
          </div>
          <div className='menu_con'>
            <ul onClick={onClose}>
              {
                menuArr.map((item, idx) => <li key={item.name}>
                  {
                    item.go ? <Link href={item.to} className={isups(item.to) ? "ups go" : "go"}>{item.name}</Link> : <a>
                      {item.name}
                    </a>
                  }
                </li>)
              }
            </ul>
          </div>
        </div>
      </div>
    </div>
  </>
}

const ScrollToTop = (props: any) => {

  const pathname = usePathname();

  useEffect(() => {

    window.scrollTo(0, 0)

  }, [pathname]);

  return props.children;

}

export default Hedaer;

